<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图</title>
    <link rel="stylesheet" href="css/mycss.css">
    <script src="js/jquery-1.11.1.min.js"></script>

</head>

<body>
<canvas id="i_1" width="500px" height="500px"></canvas>



<script>
    window.onload = function() {
        var a_1 = document.getElementById('i_1');
        var a_2 = a_1.getContext('2d');
        a_1.onmousedown = function(ev) {
//获取event对象
            var ev = ev || window.event;
 //ev.clientX-a_1.offsetLeft,
 // ev.clientY-a_1.offsetTop,
 // 鼠标在当前画布上X,Y坐标
            a_2.moveTo(ev.clientX-a_1.offsetLeft,ev.clientY-a_1.offsetTop);
            document.onmousemove = function(ev) {
            a_2.lineTo(ev.clientX-a_1.offsetLeft,ev.clientY-a_1.offsetTop);
            a_2.lineWidth=5;
            a_2.strokeStyle="red";
            a_2.stroke();
            };
            a_1.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            a_1.onmouseout = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    };


</script>
</body>
</html>